<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
var upColor = "#ec0000";
var upBorderColor = "#8A0000";
var downColor = "#00da3c";
var downBorderColor = "#008F28";
export default {
  name: "BarHistogram",
  props: {
    title: "",
    tableChoice: "",
    unit: "",
    universal: "",
  },
  data() {
    return {
      echartsList: [],
      isDownLoad: 0,
      list: [],
      decrementList: [],
      labelName: "",
      labelName1: "",
      dataColumn: [],
      dataColumn1: [],
      openColumn: [],
      openColumn1: [],
      worldMapContainer: {},
      dataArr: [],
      remarks: 1,
      dataList: [],
    };
  },
  mounted() {
    this.worldMapContainer = document.getElementById("main");
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
  },
  created() {},
  methods: {
    resizeWorldMapContainer() {
      if (this.isDownLoad == 1) {
        this.worldMapContainer.style.width = "19999px";
        this.worldMapContainer.style.height = "1920px";
      } else {
        this.worldMapContainer.style.width = window.innerWidth - 270 + "px";
        this.worldMapContainer.style.height = window.innerHeight - 40 + "px";
      }
    },

    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL();
    },
    getSign(openVal, closeVal) {
      var sign;
      if (openVal > closeVal) {
        sign = -1;
      } else if (openVal < closeVal) {
        sign = 1;
      } else {
      }
      return sign;
    },

    async drawLine(echartsList) {
      let myChart = echarts.init(this.worldMapContainer);
      let dataList = echartsList[0].dataList;
      let newData = [];
      dataList.map((item, index) => {
        newData[index] = [
          item.create_time,
          item.opening_price,
          item.highset_price,
          item.minimum_price,
          item.closing_price,
          item.the_position,
          this.getSign(item.opening_price, item.closing_price),
        ];
      });
      this.dataList = newData;

      console.log("dataList", this.dataList);

      let option = {
        dataset: {
          source: this.dataList,
        },
        title: {
          text: this.title,
          x: "center",
          y: "top",
          textAlign: "left",
          textStyle: {
            fontSize: "22",
          },
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: false,
            },
          },
        },
        grid: [
          {
            left: "10%",
            right: "10%",
            bottom: 200,
          },
          {
            left: "10%",
            right: "10%",
            height: 80,
            bottom: 80,
          },
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            // inverse: true,
            axisLine: { onZero: false },
            splitLine: { show: false },
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "category",
            gridIndex: 1,
            boundaryGap: false,
            axisLine: { onZero: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            min: "dataMin",
            max: "dataMax",
          },
        ],
        yAxis: [
          {
            scale: true,
            splitArea: {
              show: true,
            },
          },
          {
            scale: true,
            gridIndex: 1,
            splitNumber: 2,
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
          },
        ],
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0, 1],
            start: 10,
            end: 100,
          },
          {
            show: true,
            xAxisIndex: [0, 1],
            type: "slider",
            bottom: 10,
            start: 10,
            end: 100,
          },
        ],
        visualMap: {
          show: false,
          seriesIndex: 1,
          dimension: 6,
          pieces: [
            {
              value: 1,
              color: upColor,
            },
            {
              value: -1,
              color: downColor,
            },
          ],
        },
        series: [
          {
            type: "candlestick",
            itemStyle: {
              color: upColor,
              color0: downColor,
              borderColor: upBorderColor,
              borderColor0: downBorderColor,
            },
            encode: {
              x: 0,
              y: [1, 4, 3, 2],
            },
          },
          {
            name: "Volumn",
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: "#7fbe9e",
            },
            large: true,
            encode: {
              x: 0,
              y: 5,
            },
          },
        ],
      };
      if (this.isDownLoad == 1) {
        option.yAxis.nameTextStyle = {
          fontSize: 60, //  字体大小
          lineHeight: 36,
          padding: [80, 15, 4, 0], //  内填充
        };
        option.title.textStyle.fontSize = 90;
        option.title.textStyle.lineHeight = 90;
        option.xAxis[0].axisLabel = { fontSize: "72", lineHeight: 150 };
        option.yAxis[0].axisLabel = { fontSize: "72" };
        option.title.textStyle.fontSize = 90;
        option.title.textStyle.lineHeight = 90;
        option.grid[0].top = 170;
        option.grid[0].bottom = 600;
        option.grid[1].bottom = 100;
        option.grid[1].height = 300;
        option.dataZoom = [];
      }
      myChart.setOption(option);

      if (this.isDownLoad == 1) {
        const chartImgUrl = myChart.getDataURL({
          pixelRatio: 1,
          backgroundColor: "",
          type: "png",
        });
        setTimeout(() => {
          this.downloadFile(chartImgUrl, this.title);
        }, 1000);
      }
    },
  },
};
</script>

<style scoped>
#main {
  width: 100%;
  height: 900px;
}
</style>
